<!-- <template>
 
    <div id="app">
      <RolePermissions :roles="roles" />
    </div>
  </template>
  
  <script>
  import RolePermissions from '../components/RolePermissions.vue';
  
  export default {
    name: 'App',
    components: {
      RolePermissions
    },
    data() {
      return {
        roles: [
          // 您的角色权限数据
          {
        "roleId": 1,
        "roleName": "超级管理员",
        "menuCount": 5,
        "menus": [
            {
                "menid": 1,
                "menuName": "基础信息管理",
                "childrenMenus": [
                    {
                        "menid": 2,
                        "menuName": "学院管理"
                    },
                    {
                        "menid": 3,
                        "menuName": "学期管理"
                    }
                ]
            },
            {
                "menid": 4,
                "menuName": "实验室管理",
                "childrenMenus": [
                    {
                        "menid": 5,
                        "menuName": "楼栋管理"
                    },
                    {
                        "menid": 6,
                        "menuName": "楼层管理"
                    },
                    {
                        "menid": 7,
                        "menuName": "实验室管理"
                    }
                ]
            },
            {
                "menid": 8,
                "menuName": "权限管理",
                "childrenMenus": [
                    {
                        "menid": 9,
                        "menuName": "用户列表"
                    },
                    {
                        "menid": 10,
                        "menuName": "权限分配"
                    }
                ]
            },
            {
                "menid": 11,
                "menuName": "日安全检查登记管理",
                "childrenMenus": [
                    {
                        "menid": 12,
                        "menuName": "日安全检查登记列表"
                    },
                    {
                        "menid": 16,
                        "menuName": "实验室"
                    }
                ]
            },
            {
                "menid": 13,
                "menuName": "个人中心",
                "childrenMenus": [
                    {
                        "menid": 14,
                        "menuName": "个人信息"
                    },
                    {
                        "menid": 15,
                        "menuName": "修改密码"
                    }
                ]
            }
        ]
    },
    {
        "roleId": 2,
        "roleName": "实验室管理员",
        "menuCount": 2,
        "menus": [
            {
                "menid": 11,
                "menuName": "日安全检查登记管理",
                "childrenMenus": [
                    {
                        "menid": 12,
                        "menuName": "日安全检查登记列表"
                    },
                    {
                        "menid": 16,
                        "menuName": "实验室"
                    }
                ]
            },
            {
                "menid": 13,
                "menuName": "个人中心",
                "childrenMenus": [
                    {
                        "menid": 14,
                        "menuName": "个人信息"
                    },
                    {
                        "menid": 15,
                        "menuName": "修改密码"
                    }
                ]
            }
        ]
    }
        ]
      };
    }
  };
  </script>
  
  <style>
  /* 在这里添加全局样式 */
  body {
    font-family: Arial, sans-serif;
  }
  </style>
   -->

   <template>
    <div>
        <div class="tableHeadBox">
            <div class="buttonBox">
                <el-button class="addButton" type="primary" size="small" @click="ClickAdd">添加学院</el-button>
            </div>
            <div class="searchBox">
                <el-input class="searchInput" v-model="searchStr" size="small" placeholder="请输入学院"></el-input>
                <el-button class="searchButton" type="primary" size="small" :icon="Search">搜索</el-button>
            </div>
        </div>

        <!--#region 列表 -->
        <div class="tableBox">
            <el-table :data="filterTableData" height="100%" style="width: 100%">
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <!-- 按钮 -->
                <el-table-column fixed="right" label="操作" width="330">
                    <template #default="scope">
                        <el-button round type="info" size="small"
                        @click="ClickEditold(scope.$index, scope.row)">编辑</el-button>
                        <el-button round type="primary" size="small"
                            @click="ClickEdit(scope.$index, scope.row)">编辑权限</el-button>
                        <el-button round type="danger" size="small"
                            @click="ClickDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- #endregion -->
    </div>

    <!--修改弹窗 -->
    <el-dialog v-model="dialog" :title="编辑" width="800" top="30vh">
      <div>
        <!-- 在这里添加编辑表单的元素 -->
        <el-form  :model="form1" label-width="120px">
          <el-form-item label="角色ID">
            <el-input disabled v-model="form1.roleid"></el-input>
          </el-form-item>
          <el-form-item label="角色名称">
            <el-input v-model="form1.name"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="saveChanges">确 定</el-button>
      </span>
    </el-dialog>
     <!-- #endregion -->
  <!-- 二级菜单分配对话框 -->
 
  <el-dialog v-model="dialogVisible"  :title="编辑" width="800" top="30vh" >
    <el-table
      ref="multipleTable"
      :data="allmenus"
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="菜单ID"
        width="120">
        <template #default="scope">{{ scope.row.menid }}</template>
      </el-table-column>
      <el-table-column
        label="菜单名称"
        width="150">
        <template #default="scope">{{ scope.row.menuName }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="120">
        <template #default="scope">
            <el-button
          size="small"
          :type="scope.row.state ? 'primary' : 'info'"
          @click="toggleState(scope.row)">
          {{ scope.row.state ? '激活' : '未激活' }}
        </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="120">
        <template #default="scope">
          <el-button size="small" @click="sssssssss(scope.row.menid)">子权限一览</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>


   <!-- #endregion -->
<!-- 二级菜单分配对话框 -->
 
<el-dialog v-model="dialogVisibletwo"  :title="子权限一览" width="800" top="30vh" >
    
    <el-table
      ref="multipleTable"
      :data="allmenustwo"
      tooltip-effect="dark"
      style="width: 100%">
     
      <el-table-column
        label="菜单ID"
        width="120">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column
        label="菜单名称"
        width="150">
        <template #default="scope">{{ scope.row.name }}</template>
      </el-table-column>
    
    </el-table>
  </el-dialog>


   <!-- #endregion -->
    
</template>

<script setup>
import service from '@/request';
import '../assets/css/table.css'
import { Search } from '@element-plus/icons-vue'
import { reactive, ref,computed, onBeforeMount, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import AcademicianForm from '@/components/AcademicianForm.vue';

let allmenustwo = reactive([]);
let dialogVisibletwo = ref(false)
function sssssssss(row)
{
    console.log("ssssssssssssss"+row)
    dialogVisible.value = false;
    allmenustwo.length=0;
     service.get("/User/menuTwo?menid=" + row).then(
     (res) => {
        allmenustwo.push(...res.value);
    }
  );
   console.log(allmenustwo)

    dialogVisibletwo.value=true;
}

function saveChanges()
{
    service.post("/User/roleSetting", form1).then(
            async res => {
                ShowTip(true, "操作成功")
                getDataList();window.location.reload();
            },
            error => {
                ShowTip(false, error)
            }
        )
}
let dialog = ref(false)
const form1 = reactive({
      roleid: 0,
      name: ''
    });
function ClickEditold(index,row)
{
    console.log(row)

    form1.roleid=row.id;
    form1.name=row.name;
    console.log(form1)
    dialog.value=true;
}
const toggleState = (row) => {
      row.state = !row.state;
      const jus = {
        roleid: roleid,
        menid: row.menid,
        state: row.state
      };
      console.log(jus);
      service.post("/User/jusSetting", jus).then(
            async res => {
                ShowTip(true, "操作成功")
            },
            error => {
                ShowTip(false, error)
            }
        )
       // window.location.reload();
       
    };

// #region 显示提示
async function ShowTip(isSuccess, msg) {
    if (isSuccess == true) {
        ElMessage({message: msg, type: 'success'})
    }
    else {
        ElMessage({message: msg, type: 'error'})
    }
}
//#endregion

//获取数据
let tableData = reactive([])
async function getDataList() {
    let resultData = []
    await service.get("/User/getAllRoles").then(
        (res) => {
            resultData.push(...res.value)
        }
    )
    return resultData
}


//搜索
let searchStr=ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !searchStr.value ||
      data.name.toLowerCase().includes(searchStr.value.toLowerCase())
  )
)

//添加/编辑
let currentBuilding = null;
let roleId=0;
let dialogVisible = ref(false)
async function ClickAdd() {
    currentBuilding = null;
    dialogVisible.value = true;
}
// 定义菜单数据
let allmenus = reactive([]);
let ownmenus = reactive([]);
let roleid=ref(0);
async function ClickEdit(index, row) {
  // 获取数据
  roleid=row.id;
  console.log(roleid)
  allmenus.length = 0;
  ownmenus.length = 0;
  await service.get("/User/getOneMenu").then(
    async (res) => {
      allmenus.push(...res.value);
    }
  );
  
  await service.get("/User/getOneMenuByid?roleId=" + row.id).then(
    async (res) => {
      ownmenus.push(...res.value);
    }
  );


 allmenus.forEach(menu => {
      menu.state = false; // 初始状态为 false，表示未选中
    });

 nextTick(() => {
        ownmenus.forEach(ownMenu => {
          const menu = allmenus.find(menu => menu.menid === ownMenu.menid);
          if (menu) {
            // 触发选中
            menu.state = true; // 设置为 true，表示选中
          }
        });
      });


 console.log(ownmenus);
 console.log(allmenus);

 dialogVisible.value = true;
}

async function Close() {
    currentBuilding = null;
    dialogVisible1.value = false;
   await Reload()
}


//删除
async function ClickDelete(index, row) {
    await ElMessageBox.confirm(
        '你确定要这么做吗，这样做将无法撤回?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        service.delete("/Mangment/deleteAcademician?academicianId="+row.id).then(
            async res=>{
                ShowTip(true,'删除成功')
                await Reload()
            },
            error=>{
                ShowTip(false,'删除失败')
            }
        )
    }).catch(() => {
        ShowTip(false, '取消删除')
    })
}


async function Reload(){
    tableData.length = 0
    tableData.push(...await getDataList())
}

onBeforeMount(async () => {
    await Reload()


})


</script>

<style scoped>
.el-radio {
    margin-top: 10px;
    width: 250px;
}

.buttonBox {
    float: left;
    height: 40px;
    padding-top: 10px;
    margin-left: 20px;
}

.searchInput,
.addInput {
    width: 200px;
}

.searchButton,
.addButton {
    margin-left: 10px;
}
</style>